<template>
	<view class="invite" v-if="info">
		<image src="https://www.stck.cc/assets/img/bg.jpg" class="top" mode="widthFix"></image>
		<view class="rule">
			<view class="info">1、一级好友得悬赏收入您都可获得其{{info.config[0]}}%奖励</view>
			<view class="info">2、二级好友得悬赏收入您都可获得其{{info.config[1]}}%奖励</view>
			<view class="btn" @click="show = true">
				<image src="https://www.stck.cc/my/btn.png" class="bg" mode=""></image>
				<view class="word">立即邀请好友</view>
			</view>
			<view class="other">
				若分销到微信/QQ失败，请复制链接
			</view>
		</view>
		<view class="title">
			<image src="https://www.stck.cc/my/l.png" class="l" mode=""></image>
			<text class="word">我的邀请</text>
			<image src="https://www.stck.cc/my/r.png" class="r" mode=""></image>
		</view>
		<view class="numBox">
			<view class="num" @click="authTo('pages/my/team')">
				<view class="t"><text class="l">{{info.count}}</text><text class="r">人</text></view>
				<view class="b">我的邀请</view>
			</view>
			<view class="num" @click="authTo('pages/my/capital/invitecapital')">
				<view class="t"><text class="l">{{info.sum}}</text><text class="r">元</text></view>
				<view class="b">我的佣金</view>
			</view>
		</view>
		<view class="title">
			<image src="https://www.stck.cc/my/l.png" class="l" mode=""></image>
			<text class="word">赚钱排行榜</text>
			<image src="https://www.stck.cc/my/r.png" class="r" mode=""></image>
		</view>
		<view class="rank">
			<view class="list">
				<view class="l">排行</view>
				<view class="c">用户</view>
				<view class="r">本月已赚</view>
			</view>
			<view class="list" v-for="(item,index) of info.rank" :key="index">
				<view class="l">{{item.rank}}</view>
				<view class="c">{{item.nickname}}</view>
				<view class="r">{{item.price}}</view>
			</view>
		</view>
		<view class="inviteImage" @click="authTo('pages/my/invite/share')">
			<image src="../../../static/way/invite.png" class="icon" mode=""></image>
			<text class="word">邀请海报</text>
		</view>
		<u-popup :show="show" @close="close">
			<view class="waybox">
				<!-- #ifdef APP -->
				<view class="way" @click="WXSceneSession">
					<!-- <image src="../../../static/way/1.png" class="icon" mode="" style="width: 51rpx;height: 43rpx;">
					</image> -->
					<text class="word">微信好友</text>
				</view>
				<view class="way" @click="WXSceneTimeline">
					<!-- <image src="../../../static/way/2.png" class="icon" mode="" style="width: 47rpx;height: 47rpx;">
					</image> -->
					<text class="word">微信朋友圈</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="way" open-type="share">
					<!-- <image src="../../../static/way/1.png" class="icon" mode="" style="width: 51rpx;height: 43rpx;">
					</image> -->
					<text class="word">微信好友</text>
				</button>
				<button class="way" open-type="share">
					<!-- <image src="../../../static/way/2.png" class="icon" mode="" style="width: 51rpx;height: 43rpx;">
					</image> -->
					<text class="word">微信朋友圈</text>
				</button>
				<!-- #endif -->
			
				<view class="way">
					<!-- <image src="../../../static/way/3.png" class="icon" mode="" style="width: 41rpx;height: 44rpx;">
					</image> -->
					<text class="word">QQ</text>
				</view>
				<view class="way" @click="copy(share.shareUrl)">
					<!-- <image src="../../../static/way/4.png" class="icon" mode="" style="width: 43rpx;height: 43rpx;">
					</image> -->
					<text class="word">推广网址</text>
				</view>
				<view class="way"  @click="authTo('pages/my/invite/share')">
					<!-- <image src="../../../static/way/5.png" class="icon" mode="" style="width: 39rpx;height: 39rpx;">
					</image> -->
					<text class="word">海报</text>
				</view>
				<view class="way"    @click="copy(`${word}${share.shareUrl}`)">
					<!-- <image src="../../../static/way/6.png" class="icon" mode="" style="width: 41rpx;height: 41rpx;">
					</image> -->
					<text class="word">邀请文案</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				show: false,
				share: '',
				word: ''
			};
		},
		onLoad() {
			this.getInfo()
		},
		onShareAppMessage(res) {
			return {
				title: '半柿',
				path: '/pages/index/index?invitecode='+uni.getStorageSync('userinfo').invitecode
			}
		},
		onShareTimeline(res) {
			return {
				title: '半柿',
				path: '/pages/index/index?invitecode='+uni.getStorageSync('userinfo').invitecode
			}
		},
		methods: {
			WXSceneTimeline() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: this.share.shareUrl,
					title: "小伙伴快来和我一起赚钱啦",
					summary: "帮助蕲春人解决问题就能赚钱！1元提现，及时到账，靠谱！",
					imageUrl: "http://www.stck.cc/logo.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			WXSceneSession() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.share.shareUrl,
					title: "小伙伴快来和我一起赚钱啦",
					summary: "帮助蕲春人解决问题就能赚钱！1元提现，及时到账，靠谱！",
					imageUrl: "http://www.stck.cc/logo.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			close() {
				this.show = false
			},
			getInfo() {
				uni.$u.http.post('/extension', ).then(res => {
					if (res.code == 1) {
						this.info = res.data

					}
				}).catch((res) => {

				})
				uni.$u.http.post('/share').then(res => {
					if (res.code == 1) {
						this.share = res.data
					}
				}).catch((res) => {

				})
				uni.$u.http.post('/getconfig', {
					type: 8
				}).then(res => {
					if (res.code == 1) {
						res.data.config = res.data.config.replace(/<img/g,
							"<img style='max-width:100%;height:auto'")
						this.word = res.data.config

					}
				}).catch((res) => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invite {
		background: #e51a32;
		padding-bottom: 100rpx;

		.inviteImage {
			position: fixed;
			right: 0;
			bottom: 300rpx;
			width: 200rpx;
			height: 68rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(to bottom, #FFC141, #FFE87A);
			border-radius: 34rpx 0 0 34rpx;

			.icon {
				width: 37rpx;
				height: 33rpx;
			}

			.word {
				color: #191615;
				font-size: 26rpx;
			}
		}

		.waybox {
			display: flex;
			flex-wrap: wrap;
			padding: 40rpx;

			.way {
				width: 25%;
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-bottom: 40rpx;
				background: #fff;
				padding: 0;
				margin: 0;
				line-height: 2.55;
				.icon {}

				.word {
					color: #191615;
					font-size: 24rpx;
				}
			}
			.way:after{
				display: none;
			}
		}

		.top {
			width: 100%;
		}

		.rank {
			width: 700rpx;
			margin: 20rpx auto 0;
			background: #fff;
			border-radius: 10rpx;
			position: relative;

			.list {
				display: flex;
				align-items: center;
				height: 80rpx;

				.l,
				.c,
				.r {
					flex: 1;
					text-align: center;
					color: #575859;
					flex-shrink: 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.list:first-of-type {

				.l,
				.c,
				.r {
					font-weight: bold;
				}
			}
		}

		.numBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 700rpx;
			margin: 20rpx auto;
			position: relative;

			.num {
				width: 320rpx;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: #fff;
				border-radius: 10rpx;

				.t {
					display: flex;
					align-items: flex-end;

					.l {
						font-size: 100rpx;
						color: #FF1E15;
					}

					.r {
						font-size: 48rpx;
						color: #FF1E15;
						margin-bottom: 20rpx;
					}
				}

				.b {
					font-size: 28rpx;
					color: #575859;
				}
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 50rpx 0;

			.l,
			.r {
				width: 125rpx;
				height: 57rpx;
			}

			.word {
				font-size: 48rpx;
				color: #fff;
			}
		}

		.rule {
			width: 700rpx;
			box-sizing: border-box;
			padding: 40rpx 60rpx;
			margin: -200rpx auto 0;
			background: #fff;
			position: relative;
			border-radius: 10rpx;

			.info {
				color: #575859;
				font-size: 32rpx;
				line-height: 60rpx;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 539rpx;
				height: 129rpx;
				position: relative;

				.bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}

				.word {
					font-size: 36rpx;
					color: #fff;
					position: relative;
					z-index: 100;
				}
			}

			.other {
				color: #999;
				font-size: 30rpx;
				text-align: center;
			}
		}
	}
</style>
